<template>
  <div>
    <div class="card-header">
      <span>{{title}}</span>
      <svg
        t="1655197293488"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3069"
        width="17"
        height="17"
      >
        <path
          d="M501.973006 81.099336c-110.239789 0-214.772972 45.604889-294.697419 128.254759A455.249647 455.249647 0 0 0 116.305582 347.639372c-22.234981 52.782104-34.199671 107.961942-35.222704 164.164813-2.277847 111.94218 42.6317 218.305633 126.192709 299.708682a455.065821 455.065821 0 0 0 139.428197 92.680388 438.441536 438.441536 0 0 0 165.651407 36.02994h7.864566c108.873081 0 212.615012-44.917539 291.844116-126.424489a448.520008 448.520008 0 0 0 91.201786-135.77565 444.987348 444.987348 0 0 0 36.941079-161.767079v-2.501635l0.335683-2.277847v-1.486595l-0.223789-2.277847v-2.277846a438.033921 438.033921 0 0 0-130.069044-298.469853 437.722216 437.722216 0 0 0-300.739707-125.625245h-7.528883v-0.239773z m0-80.939487l9.015477-0.127879c277.24192 3.876336 502.293176 225.155158 510.613311 501.957493 0.231781 2.741409 0.231781 5.586719 0.231781 8.671803 0.335683 3.077091 0 5.8185-0.351668 8.66381-9.566956 267.331288-226.409972 502.293176-501.038362 502.293175h-9.35116C237.49502 1016.47911-4.987758 793.034335 0.598961 510.996948 5.618216 240.013113 224.267524 0.039962 501.973006 0.159849z m1.838262 768.033968c2.046066 2.733416 5.131149 4.443799 8.543923 4.555693a21.835359 21.835359 0 0 0 15.153675-6.841532c13.906854-11.397226 30.331327-31.690043 49.361338-61.326028l15.960912 9.119379c-46.052466 80.028348-95.190016 120.278299-146.8292 120.2783-19.717361 0-35.34259-5.594711-47.083491-16.768149a56.314765 56.314765 0 0 1-17.559401-42.296017c0-11.285332 2.509628-25.527868 7.872558-43.087269l63.49198-218.217716c6.154182-20.740394 9.231274-36.477517 9.231273-47.075499a24.145175 24.145175 0 0 0-8.887598-18.238759 33.784064 33.784064 0 0 0-23.489795-7.864566c-4.787474 0-10.366201 0.343675-16.528375 0.45557l5.594711-18.238759 154.589864-25.080291h27.014463L506.656578 722.021464c-4.795467 18.582434-7.305094 30.898791-7.305094 36.933087 0.471554 3.428759 1.942164 6.729638 4.459784 9.239266z m115.93041-465.927553a66.513124 66.513124 0 0 1-47.547054 19.605467 64.714824 64.714824 0 0 1-46.843718-19.605467 65.162401 65.162401 0 0 1-19.493572-47.315272 65.697895 65.697895 0 0 1 19.261791-47.658948 63.659822 63.659822 0 0 1 47.083492-19.725353c18.926109 0 35.006908 6.617744 47.882736 19.725353 12.883821 13.115602 19.493572 29.188408 19.493572 47.658948a63.220237 63.220237 0 0 1-19.837247 47.315272z"
          fill="#8a8a8a"
          p-id="3070"
        ></path>
      </svg>
    </div>
    <div class="card-content">{{count}}</div>
    <div class="card-charts">
      <slot name="charts"></slot>
    </div>
    <div class="card-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "Detail",
  props:['title','count']
}
</script>

<style scoped>
.card-header {
  display: flex;
  color: #a7a7a7db;
  font-size: 15px;
  justify-content: space-between;
}
.card-content {
  font-size: 28px;
  padding: 10px 0;
}
.card-charts {
  height: 50px;
}
.card-footer {
  border-top: 1px solid rgb(218, 218, 218);
  padding-top: 10px;
}
</style>